import { observer } from "Mobx-react";
import { Input, Dropdown, message, Modal, Radio, Checkbox, Button, type MenuProps } from "antd";
import { MoreOutlined } from "@ant-design/icons";
import type { questionType } from "@/types/index";
import { questionnaire } from "@/stores/questionnaire";
import { typeEnum } from "@/assets/common/enums";
import { MatrixEditorContent } from "../../stye";
import SliderItem from "@/components/SliderItem/SliderItem";

const items: MenuProps["items"] = [
  {
    key: "1",
    label: "删除"
  },
  {
    key: "2",
    label: "添加"
  },
  {
    key: "3",
    label: "上移"
  },
  {
    key: "4",
    label: "下移"
  }
];

const items2: MenuProps["items"] = [
  {
    key: "1",
    label: "删除"
  },
  {
    key: "2",
    label: "添加"
  },
  {
    key: "3",
    label: "左移"
  },
  {
    key: "4",
    label: "右移"
  }
];

//选项移除
const optionRemoveClick = (question: questionType, index: number, optionIndex: number, optionId: number) => {
  if (question.option.length > 1) {
    const id = question.id;
    let bool = false;
    // 判断是否存在逻辑
    for (const item of questionnaire.controlLogic) {
      const questionIdsArray = item.questionIds.split(",");
      const idIndex = questionIdsArray.indexOf(String(id));
      if (idIndex !== -1) {
        bool = item.parentAnswer.split("|")[idIndex].split(",").includes(String(optionId));
        if (bool) break;
      }
    }
    // 判断是存在选项关联逻辑
    if (!bool) {
      for (const item of questionnaire.controlOption) {
        if (item.childId === id && item.optionId === optionId) {
          bool = true;
          break;
        }
        const questionIdsArray = item.questionIds.split(",");
        const idIndex = questionIdsArray.indexOf(String(id));
        if (idIndex !== -1) {
          bool = item.parentAnswer.split("|")[idIndex].split(",").includes(String(optionId));
          if (bool) break;
        }
      }
    }
    //判断是否有逻辑关联
    if (bool) {
      Modal.confirm({
        title: "提示",
        content: `题目选项有关联控制逻辑，删除选项，和题目相关的逻辑控制会删除，是否继续？`,
        okText: "确认",
        cancelText: "取消",
        onOk() {
          questionnaire.optionRemove(index, optionIndex, optionId);
        }
      });
    } else {
      questionnaire.optionRemove(index, optionIndex);
    }
  } else {
    const text = question.children && question.children.length === 0 ? "不能删除所有选项" : "不能删除所有列";
    message.warning(text);
  }
};

function MatrixEditor({ question, index = 0 }: { question: questionType; index: number }) {
  const rowsClick = ({ key }: { key: string }, rowsIndex: number) => {
    switch (key) {
      case "1":
        if (question.children && question.children.length > 1) {
          questionnaire.removeRows(index, rowsIndex);
        } else {
          message.warning("不能删除所有行");
        }
        return;
      case "2":
        if (question.children) questionnaire.addRows(index, rowsIndex, question.children.length + 1);
        return;
      case "3":
        questionnaire.moveRows(index, rowsIndex, "上");
        return;
      case "4":
        questionnaire.moveRows(index, rowsIndex, "下");
        return;
    }
  };
  const columnClick = ({ key }: { key: string }, columnIndex: number, id = 0) => {
    switch (key) {
      case "1":
        optionRemoveClick(question, index, columnIndex, id);
        return;
      case "2":
        if (question.option.length < 5) {
          questionnaire.optionAdd(index, columnIndex);
        } else {
          message.warning("最多只能添加5行");
        }
        return;
      case "3":
        questionnaire.optionMove(index, columnIndex, "上");
        return;
      case "4":
        questionnaire.optionMove(index, columnIndex, "下");
        return;
    }
  };
  return (
    <MatrixEditorContent className="matrix-editor">
      {question.type === typeEnum.MATRIX_SLIDER ? (
        <table className="matrix-editor-table" border={1}>
          <thead>
            <tr>
              <th className="matrix-first">行标题\选项</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {question.children &&
              question.children.map((item, rowsIndex) => {
                return (
                  <tr key={item.id}>
                    <td className="matrix-first">
                      <Input value={item.title} style={{ width: "85%" }} onChange={e => (item.title = e.target.value)} />
                      <Dropdown menu={{ items, onClick: e => rowsClick(e, rowsIndex) }}>
                        <MoreOutlined />
                      </Dropdown>
                    </td>
                    <td>
                      <SliderItem option={question.option} disabled={true} textShow={false}></SliderItem>
                    </td>
                  </tr>
                );
              })}
          </tbody>
        </table>
      ) : (
        <table className="matrix-editor-table" border={1}>
          <thead>
            <tr>
              <th className="matrix-first">行标题\选项</th>
              {question.option.map((item, columnIndex) => {
                return (
                  <th key={item.id}>
                    <Input value={item.content} style={{ width: "85%" }} onChange={e => (item.content = e.target.value)} />
                    <Dropdown menu={{ items: items2, onClick: e => columnClick(e, columnIndex, item.id) }}>
                      <MoreOutlined />
                    </Dropdown>
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody>
            {question.children &&
              question.children.map((item, rowsIndex) => {
                return (
                  <tr key={item.id}>
                    <td className="matrix-first">
                      <Input value={item.title} style={{ width: "85%" }} onChange={e => (item.title = e.target.value)} />
                      <Dropdown menu={{ items, onClick: e => rowsClick(e, rowsIndex) }}>
                        <MoreOutlined />
                      </Dropdown>
                    </td>
                    {question.type === typeEnum.MATRIX_RADIO
                      ? question.option.map(son => (
                          <td key={son.id}>
                            <Radio disabled={true}></Radio>{" "}
                          </td>
                        ))
                      : question.option.map(son => (
                          <td key={son.id}>
                            <Checkbox disabled={true}></Checkbox>{" "}
                          </td>
                        ))}
                  </tr>
                );
              })}
          </tbody>
        </table>
      )}
      <div className="option-add">
        <Button type="link" size="large" onClick={() => rowsClick({ key: "2" }, -1)}>
          添加行
        </Button>
        {question.type !== typeEnum.MATRIX_SLIDER && (
          <Button type="link" size="large" onClick={() => columnClick({ key: "2" }, -1)}>
            添加列
          </Button>
        )}
      </div>
    </MatrixEditorContent>
  );
}

export default observer(MatrixEditor);
